<template>
    <div>
      <div class="top-panel">
        <el-card>
          <el-form :model="searchForm" label-width="70px" label-position="right">
            <el-row :gutter="10">
              <el-col :span="5">
                <el-form-item label="发布日期" label-width="70px">
                  <el-date-picker v-model="searchForm.joinTimeRange" type="daterange" range-separator="~"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="loadDataList">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="标题" label-width="40px">
                  <el-input v-model="searchForm.titleFuzzy" clearable placeholder="支持模糊搜索" @keyup.enter="loadDataList">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" :style="{ paddingLeft: '10px' }">
                <el-button type="success" @click="loadDataList()">查询
                </el-button>
                <el-button type="danger" @click="showEdit('add',{})">新增公告
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <el-card class="table-data-card">
        <Table ref="tableInfoRef" :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions"
          :extHeight="tableOptions.extHeight">
          <template #slotNickName="{ index, row }">
            <span>{{ row.nickName }}</span>
            <span v-if="row.sex == 0">(女)</span>
            <span v-if="row.sex == 1">(男)</span>
          </template>

          <template #slotStatus="{ index, row }">
            <div class="row-op-panel">
              <Badge showType="green" text="待发布" v-if="row.status == 0"></Badge>
              <Badge showType="blue" text="已发布" v-if="row.status == 1"></Badge>
              <Badge showType="red" text="已取消" v-if="row.status == 2"></Badge>
            </div>
          </template>

          <template #slotOperation="{ index, row }">
            <div class="row-op-panel">
              <a href="javascript:void(0)"
                @click="updateStatus(row,2)">取消发布</a>
                <a href="javascript:void(0) "
                @click="updateStatus(row,1) " >发布</a>
                <a href="javascript:void(0)"
                @click="deleteNoticeById(row)" >删除</a>
                <a href="javascript:void(0)"
                @click="showEdit('edit',row)">编辑</a>
            </div>
          </template>
        </Table>
      </el-card>
    </div>
    <NoticeEdit ref="showNoticeEditRef" @reload="loadDataList"></NoticeEdit>
  </template>

  <script setup>
  import NoticeEdit from './NoticeEdit.vue';
  import { getCurrentInstance, nextTick, ref } from 'vue'
  const { proxy } = getCurrentInstance()

  const api = {
    loadDataList: '/noticeInfo/loadNoticeList',
    updateStatus: '/noticeInfo/updateStatus',
    deleteNoticeById:"/noticeInfo/deleteNoticeById",
  }

  const userInfo = ref({});

  const getUserInfo=()=>{
    userInfo.value=proxy.VueCookies.get("userInfo");
  }
  getUserInfo();

  const searchForm = ref({})

  const tableData = ref({})
  const tableOptions = ref({})

  const columns = [
    {
      label: '标题',
      prop: 'title',
    },
    {
      label: '发布人',
      prop: 'name',
    },
    {
      label: '联系邮箱',
      prop: 'email',
    },
    {
      label: '发布时间',
      prop: 'publishTime',
    },

    {
      label: '状态',
      prop: 'status',
      scopedSlots: 'slotStatus',

    },
    {
      label: '创建时间',
      prop: 'createTime',
    },
    {
      label: '更新时间',
      prop: 'updateTime',
    },
    {
      label: '操作',
      prop: 'operation',
      scopedSlots: 'slotOperation',
    },
  ]
  const tableInfoRef = ref()
  const loadDataList = async () => {
    let params = {
      pageNo: tableData.value.pageNo,
      pageSize: tableData.value.pageSize,
      type:0,
    }
    Object.assign(params, searchForm.value)

    if (searchForm.value.joinTimeRange) {
      params.publishTimeStart = searchForm.value.joinTimeRange[0]
      params.publishTimeEnd = searchForm.value.joinTimeRange[1]
    }
    delete params.joinTimeRange
    let result = await proxy.Request({
      url: api.loadDataList,
      params: params,
    })
    if (!result) {
      return
    }
    Object.assign(tableData.value, result.data)
  }

  const updateStatus = (data,status) => {

    let info = status == 1 ? '发布' : '取消发布'
    proxy.Confirm(`确定要【${info}】【${data.title}】吗？`, async () => {
      let result = await proxy.Request({
        url: api.updateStatus,
        params: {
          id: data.id,
          status: status,
        },
      })
      if (!result) {
        return
      }
      proxy.Message.success('操作成功')
      loadDataList()
    })
  }

  const deleteNoticeById = (data) => {
  proxy.Confirm(`确定要【删除】【${data.title}】吗？`, async () => {
    let result = await proxy.Request({
      url: api.deleteNoticeById,
      params: {
        id: data.id,
      },
    })
    if (!result) {
      return
    }
    proxy.Message.success('操作成功')
    loadDataList()
  })
  }

  const showNoticeEditRef=ref();
  const showEdit=(type,data)=>{
    showNoticeEditRef.value.showEdit(type,Object.assign({},data));
  }

  </script>

  <style lang="scss" scoped>
  </style>
